<template>
    <div style="position: relative;height: 100%;">
        <div class="ball"></div>
    </div>
</template>

<script>
export default {

}
</script>

<style scoped>
.ball {
    height: 100px;
    width: 100px;
    border-radius: 50%;
    background-color: skyblue;
    position: absolute;
    top: 0;
    left: 0;
    animation: hor 3.6s infinite linear alternate,vel 3s infinite linear alternate;
}
@keyframes hor {
    to {
        left: calc(100% - 100px);
    }
}
@keyframes vel {
    to {
        top: calc(100% - 100px);
    }
}
</style>